<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" width="800px" @callBack="onCallBack" @close="onClose">
    <div class="app-container">
      <table class="tb-table">
        <tr>
          <td class="tb-title" width="20%">购货方名称:</td>
          <td colspan="3">{{ form.name }}</td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">纳税人识别号:</td>
          <td colspan="3">{{ form.code }}</td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">全电发票号:</td>
          <td colspan="3">{{ form.hm }}</td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">发票类型:</td>
          <td width="30%">
            <el-tag size="mini">{{ form.type }}</el-tag>
          </td>
          <td class="tb-title" width="20%">开票结果:</td>
          <td width="30%">
            <el-tag v-if="form.success" size="mini">开票成功</el-tag>
            <el-tag v-if="!form.success" type="info" size="mini">未开票</el-tag>
          </td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">开票项目:</td>
          <td colspan="3">
            <el-tag size="mini">{{ form.item }}</el-tag>
          </td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">邮箱:</td>
          <td colspan="3">{{ form.email }}</td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">金额:</td>
          <td colspan="3">{{ form.fee }}</td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">备注:</td>
          <td colspan="3">{{ form.bz }}</td>
        </tr>
        <tr>
          <td class="tb-title" width="20%">操作人:</td>
          <td width="30%">
            {{ form.creatorName }}
          </td>
          <td class="tb-title" width="20%">创建时间:</td>
          <td width="30%">
            {{ form.createTime }}
          </td>
        </tr>
      </table>
    </div>
  </el-dialog>
</template>

<script>

import { getOne } from '@/api/sysInvoice'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '查看发票',
      form: {}
    }
  },
  methods: {
    init(id) {
      getOne(id).then(res => {
        if (res.code === 20000) {
          this.form = res.data
        }
      })
    },
    onShow(id) {
      this.init(id)
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
    },
    onCallBack() {
      this.$emit('onCallBack')
    }
  }
}
</script>

<style scoped>
.el-form {
  padding-left: 20px;
  padding-right: 20px;
}
</style>
